<template>
  <div class="role">
    <top-title
      title="菜单管理"
      btn-text="添加菜单"
    />
    <n-flex class="box">
      <custom-table-filter />
      <n-data-table
        :columns="columns"
        :data="list"
        style="height: calc(100vh - 240px)"
      />
    </n-flex>
    <menu-form
      v-model:visible="visible"
      :menu-list="list"
    />
  </div>
</template>

<script lang="ts" setup>
  import { h } from 'vue'
  import type { DataTableColumns } from 'naive-ui'
  import { NTag, NButton } from 'naive-ui'
  import MenuForm from './MenuForm.vue'
  const visible = ref(false)

  const columns = ref<DataTableColumns<Menu>>([
    {
      title: '菜单名称',
      key: 'name'
    },
    {
      title: '类型',
      key: 'type',
      align: 'center',
      render(row) {
        const typeList = [
          { id: 1, text: '目录', type: 'primary' },
          { id: 2, text: '菜单', type: 'info' },
          { id: 3, text: '权限', type: 'warning' }
        ]
        const selectType: any = typeList.find(item => item.id === row.type)
        return h(
          NTag,
          {
            type: selectType.type
          },
          {
            default: () => selectType.text
          }
        )
      }
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 200,
      render(row) {
        return h(
          NButton,
          {
            size: 'small',
            text: true,
            type: 'primary',
            onClick: () => handleDel(row.id)
          },
          {
            default: () => '删除'
          }
        )
      }
    }
  ])

  const { list, handleDel } = useList<Menu>({
    reqUrl: 'admin/menu',
    isPage: false
  })
</script>

<style scoped lang="scss">
  .role {
    padding: 16px;
    box-sizing: border-box;
  }
</style>
